<template>
    <div class="saled-this-year flex space-between align-items-center pr16">
        <img class="light-img" :src="require('../../assets/image/circle.png')" alt="">

        <div class="icon-iimg">
            <img :src="require('../../assets/image/circle.png')" alt="">
        </div>

        <div class="title">
            <span>本年累计进口额</span>
        </div>

        <div class="price flex">
            <span class="num italic-text">18.83</span>
            <span class="unit">亿美元</span>
        </div>
        <div class="rank flex flex-column align-items-center justify-center">
            <span class="rank-text">同比上年</span>
            <div class="percent flex align-items-center">
                <span class="num italic-text">8.13%</span>
                <img :src="require('../../assets/image/down.png')" alt="">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.saled-this-year {
    position: relative;
    background: linear-gradient(90deg, #080f1c, #0a2f58, #1670c5, #0a2f58, #080f1c);
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .light-img{
        position: absolute;
        width: 2rem;
        height: 2rem;
        animation: leftToRight 3s  infinite;
    }

    .icon-iimg{
        img{
            width: 4rem;
            height: 4rem;
        }
    }

    .title{
        font-size: 0.75rem;
        color: #c8e1f7;
        white-space: nowrap;
    }

    .price{
        align-items: baseline;

        .num{
            font-size: 1.5625rem;
            color: #d9e7f7;
        }

        .unit{
            font-size: 0.75rem;
            white-space: nowrap;
            color: #a3b3c5;
            margin-left: 0.5rem;
        }
    }

    .rank{
        height: 100%;

        img{
            width: 1.25rem;
            height: 1.251rem;
        }

        .rank-text{
            font-size: 0.75rem;
            color: #91adca;
        }

        .percent{
            .num{
                color: #cddaec;
                font-size: 1.125rem;
            }

            img{
                margin-left: 0.25rem;
            }
        }
    }

    @keyframes leftToRight {
        0% { 
            left: 0;
        }

        100% { 
            left: calc(100% - 2rem);
        }
    }
}
</style>